<template>
    <div class="userpage" ref="userpage">        
        <div class="contents">
            <!-- order start -->
            <div class="order">
                <div class="item" v-for="(v, index) in order" :key="index">
                    <img :src="v.img" alt="" class="img">
                    <span class="text">{{ v.text }}</span>
                    <span class="icon iconfont" v-html="v.icon"></span>
                    <span class="subText">{{ v.subText }}</span>
                </div>
            </div>
            <!-- order end -->
            <!-- userFunction start -->
            <div class="userFunction">
                <div class="item" v-for="(v, index) in userFunction" :key="index">
                    <img :src="v.img" alt="" class="img">
                    <span class="text">{{ v.text }}</span>
                    <span class="icon iconfont" v-html="v.icon"></span>
                    <span class="subText">{{ v.subText }}</span>
                </div>
            </div>
            <!-- userFunction end -->
            <!-- service start -->
            <div class="service">
                <div class="item" v-for="(v, index) in service" :key="index">
                    <img :src="v.img" alt="" class="img">
                    <span class="text">{{ v.text }}</span>
                    <span class="icon iconfont" v-html="v.icon"></span>
                    <span class="subText">{{ v.subText }}</span>
                </div>
            </div>
            <!-- service end -->
            <div class="signOut">
                <button >退出登录</button>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll';

export default {
    data(){
        return {
            order:[{img:"./img/order.png",text:"我的订单",subText:"",icon:"&#xe677;"}],
            userFunction:[
                {img:"./img/shoppingCart.png",text:"我的购物车",subText:"",icon:"&#xe677;"},
                {img:"./img/pieceTogether.png",text:"我的拼团",subText:"",icon:"&#xe677;"},
                {img:"./img/wallet.png",text:"我的钱包",subText:"快速提现",icon:"&#xe677;"},
                {img:"./img/discountCoupon.png",text:"我的优惠券",subText:"",icon:"&#xe677;"},
                {img:"./img/collect.png",text:"我的收藏商品",subText:"",icon:"&#xe677;"},
                {img:"./img/shop.png",text:"我的收藏店铺",subText:"",icon:"&#xe677;"},
                ],
            service:[
                {img:"./img/message.png",text:"消息通知",subText:"",icon:"&#xe677;"},
                {img:"./img/service.png",text:"客服",subText:"",icon:"&#xe677;"},
                {img:"./img/feedback.png",text:"意见中心",subText:"",icon:"&#xe677;"},
            ]
        }
    },
    methods:{
        initScroll(){
            setTimeout(()=>{
                new BScroll(this.$refs.userpage,{click:true});
            },100)
        }
    },
    mounted(){
        this.initScroll();
    }
}
</script>

<style lang="less" scoped>
    .userpage{
        background-color: @ef;
        position: absolute;
        top:184px;
        bottom: @h;
        width: 100%;
        .contents{
            padding-top: 30px;

        .order,.userFunction,.service{
            margin:0px 0px 30px;
            box-shadow: 0 2PX 4PX rgba(0,0,0,0.1);
        }
        .item{
            height: 100px;
            line-height: 100px;
            background-color: @white;
            border-bottom: 1PX solid @cc;
            font-size: 30px;
            .img{
                height: 60px;
                display:block;
                float: left;
                margin:20px 40px;
            }
            .subText{
                float: right;
                font-size: 25px;
                color: @66;
            }
            .icon{
                float: right;
                margin:0px 40px;
                font-size: 25px;
            }
        }
        .signOut{
            width: 100%;
            height: 80px;
            padding: 0px 10% 30px;
            button{
                width: 80%;
                height: 80px;
                background: @pink;
                font-size: 30px;
                color: @white;
                border:0px;
                border-radius: 10px;
            }
        }
    }
}

</style>
